<template>

	<div>
		<el-header style="text-align: right; font-size: 12px">
			<el-row :gutter="20">
				<el-col :span="6">
					<div class="grid-content">
						<el-select v-model="value" placeholder="请选择模板">
						    <el-option
						      v-for="item in options"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						  </el-select>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="grid-content bg-purple">
						<el-button type="primary">增加新的模板</el-button>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="grid-content bg-purple">
						<el-button type="primary">增加药品</el-button>
					</div>
				</el-col>
			</el-row>
		</el-header>
		<el-row>
			<el-col :span="24">
				<div class="grid-content bg-purple-dark">
					<el-table :data="returnReg" border style="width: 100%">
						<el-table-column prop="name" label="药品名称" width="180">
						</el-table-column>
						<el-table-column prop="specifications" label="规格" width="180">
						</el-table-column>
						<el-table-column prop="usage" label="用法用量" width="180">
						</el-table-column>
						<el-table-column prop="matters" label="注意事项" width="280">
						</el-table-column>
						<el-table-column label="数量" width="280">
							<el-input-number v-model="num" @change="handleChange" :min="0" :max="10" label="描述文字">
							</el-input-number>
						</el-table-column>
						<el-table-column prop="price" label="单价" width="180">
						</el-table-column>
						<el-table-column fixed="right" label="操作" width="120">
							<template slot-scope="scope">
								<el-button @click.native.prevent="deleteRow(scope.$index, returnReg)" type="text"
									size="small">
									移除该药品
								</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</el-col>
		</el-row>
		<el-row>
			<div style="padding-top: 12px;">
				<el-col :span="12">
					<div class="grid-content bg-purple">总金额</div>
				</el-col>
				<el-col :span="12">
					<div class="grid-content bg-purple-light">
						<el-button type="primary">保存处方单</el-button>
					</div>
				</el-col>
			</div>
		</el-row>
	</div>
</template>

<script>
	export default {
		mounted: function() {
			this.$axios.get('http://localhost:8080/drug.json').then((result) => {
				this.returnReg = result.data; //写法固定
			}).catch((err) => {
				console.log(err);
			})
		},
		methods: {
			deleteRow(index, rows) {
				rows.splice(index, 1);
			},
			handleClick() {
				alert('button click');
			},
			addRow(index, tableData) {
				//   console.log(row)
				tableData[index].numbers = tableData[index].numbers + 1;
			},
			delRow(index, tableData) {
				//   console.log(row)
				if (tableData[index].numbers != 0) {
					tableData[index].numbers = tableData[index].numbers - 1;
				}
			},
			handleChange(value) {
				console.log(value);
			},

		},
		data() {
			return {
				num: 1,

				returnReg: [],
				options: [{
				          value: '选项1',
				          label: '黄金糕'
				        }, {
				          value: '选项2',
				          label: '双皮奶'
				        }, {
				          value: '选项3',
				          label: '蚵仔煎'
				        }, {
				          value: '选项4',
				          label: '龙须面'
				        }, {
				          value: '选项5',
				          label: '北京烤鸭'
				        }],
				        value: '',
			}
		}
	}
</script>
<style>
	.el-dropdown {
		vertical-align: top;
	}

	.el-dropdown+.el-dropdown {
		margin-left: 15px;
	}

	.el-icon-arrow-down {
		font-size: 12px;
	}
</style>
